<template>
	<view class="orders">
		<view class="menus dFlex jAround_aCenter">
			<view :class="['menuOne',!status?'active':'']" v-if="identity == '1'" @tap='changeMenu("")'>
				<text>全部</text>
				<view class="line"></view>
			</view>
			<view :class="['menuOne',status == '1'?'active':'']" v-if="identity == '1'" @tap='changeMenu("1")'>
				<text>待付款</text>
				<view class="line"></view>
			</view>
			<view :class="['menuOne',status == '2'?'active':'']" @tap='changeMenu("2")'>
				<text>待发货</text>
				<view class="line"></view>
			</view>
			<view :class="['menuOne',status == '3'?'active':'']" @tap='changeMenu("3")'>
				<text>待收货</text>
				<view class="line"></view>
			</view>
			<view :class="['menuOne',status == '4'?'active':'']" @tap='changeMenu("4")'>
				<text>已完成</text>
				<view class="line"></view>
			</view>
		</view>
		<view class="list" v-if='list.length'>
			<view class="line" v-for="(item,index) in list" :key='index' @tap.stop='lookDetail(item.orderId)'>
				<view class="orderNo dFlex jBetween_aCenter">
					<text class="num">订单编号 {{item.order_number}}</text>
					<view class="odStatus">
						<text style="color: #FF3B2F;" v-if='item.order_status=="1"'>待付款</text>
						<text style="color: #FF7D2F;" v-if='item.order_status=="2"'>待发货</text>
						<text style="color: #1BC447;" v-if='item.order_status=="3"'>待收货</text>
						<text style="color: #1664FF;" v-if='item.order_status=="4"'>已完成</text>
						<text style="color: #999999;" v-if='item.order_status=="5"'>已取消</text>
					</view>
				</view>
				<view class="shops">
					<view class="shopOne dFlex jStart_aStart" v-for="(item2,index2) in item.products" :key='index2'>
						<view class="shopImg imgPublic">
							<image :src="item2.list_img"></image>
						</view>
						<view class="shopInfo">
							<view class="shopName">{{item2.product_name}}</view>
							<view class="guige">规格:{{item2.specs_name}} X {{item2.num}}</view>
							<view class="price"><text v-if="item2.point>0">{{item2.point}}积分+</text><text>{{item2.sell_price}}</text>元</view>
						</view>
					</view>
				</view>	
				<view class="result dFlex jBetween_aCenter">
					<view class="allPrice">合计：<text v-if="item.point>0">{{item.point}}积分+</text><text>{{item.product_total}}</text>元</view>
					<view class="btns dFlex jEnd_aCenter">
						<!-- 待支付 派单中 -->
						<view class="btn status1" v-if='item.order_status == "1" || item.order_status == "2"' @tap.stop='cancelOrder(item.orderId)'>取消订单</view>
						<!-- 待支付 -->
						<view class="btn status2" v-if='item.order_status == "1" && identity == "1"' @tap.stop='payOrder(item.orderId)'>立即支付</view>
						<!-- 已完成 -->
						<view class="btn status3" v-if='item.order_status == "4" && identity == "1"' @tap.stop='sureFinish(item.orderId)'>确认收货</view>
					</view>
				</view>
			</view>
		</view>
		<view class='list empty imgPublic' v-else>
			<image src='../static/images/empty.png' mode='widthFix'></image>
		</view>
		<view class='seat'></view>
		<!-- 追缴弹窗 -->
		<uni-popup ref="popup" type="center" background-color="#fff">
			<view class="toast">
				<view class="title">追缴费用</view>
				<view class='content'>
					<view class="amount">需支付：￥<text>{{needPay}}</text></view>
					<view class="ipt">
						<input type="text" v-model="useGold" placeholder="请输入想要使用的洗护券金额">
					</view>
					<view class="account">洗护券余额：{{gold?gold:"0.00"}}</view>
				</view>
				<view class="btns dFlex jBetween_aCenter">
					<view class="btn" @click="closePopup">取消</view>
					<view class="btn sure" @click='rePayOrder'>提交</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	export default {
		components:{
			uniPopup,
		},
		data() {
			return {
				needPay:"",
				gold:'',
				useGold:"",
				orderId:'',
				
				identity:uni.getStorageSync('identify')?uni.getStorageSync('identify'):'1',
				status:'',// 默认全部 1待付款 2待接单 3待上门 4进行中 5已完成
				page:1,
				load:false,
				list:[],
			};
		},
		onLoad(e){
			this.status = e.status > 0?e.status:'';
			this.page = 1;
			this.initList();
			this.initUserInfo();
		},
		onReachBottom() {
			if(this.load){
				this.load = false;
				this.page++;
				this.initList();
			}
		},
		onShareAppMessage() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):''),
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		onShareTimeline() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):''),
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		methods:{
			// 关闭洗护券弹窗
			closePopup(){
				this.$refs.popup.close();
			},
			// 支付追加费用
			rePayOrder(){
				if(this.useGold > this.needPay){
					uni.showToast({
						title:"最多使用"+this.needPay+'元洗护券抵扣',
						icon:"none"
					})
					return
				}
				if(parseFloat(this.useGold) > parseFloat(this.gold)){
					uni.showToast({
						title:'洗护券金额不足',
						icon:"none"
					})
					return;
				}
				this.tool.getData('Order/orderPay2',{
					orderId:this.orderId,
					gold:this.useGold,
					pay_method:'2',
				}).then(res=>{
					console.log(res);
					if(res){
						uni.requestPayment({
							provider:'wxpay',
							timeStamp:res.weixin.timeStamp,
							nonceStr:res.weixin.nonceStr,
							package:res.weixin.package,
							signType:res.weixin.signType,
							paySign:res.weixin.paySign,
							success: () => {
								uni.showToast({
									title:'订单支付成功',
									icon:"success"
								})
								this.page = 1;
								this.initList();
								this.$refs.popup.close();
							},
							fail:(err)=>{
								console.log(err);
								uni.showToast({
									title:'订单支付失败',
									icon:"none"
								})
							}
						})
						
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 用户洗护券金额
			initUserInfo(){
				this.tool.getUserInfo().then(res=>{
					this.gold = res.gold;
				}).catch(err=>{
					console.log(err);
				})
			},
			initList(){
				let url = this.identity == '1'?'PointOrder/orderList':'Store/orderList';
				let data = this.identity == '1'?{
					memberId:uni.getStorageSync('userId'),
					order_status:this.status,
					page:this.page
				}:{
					storeId:uni.getStorageSync('storeId'),
					order_status:this.status,
					page:this.page
				};
				this.tool.getData(url,data).then(res=>{
					console.log(res);
					if(res){
						this.list = this.page == 1?res.list:this.list.concat(res.list);
						this.load = res.list.length>=10?true:false;
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 查看订单详情
			lookDetail(orderId){
				if(this.identity == '1'){
					uni.navigateTo({
						url:'./redeemOrderDetail?oid='+orderId,
					})
				}else{
					uni.navigateTo({
						url:'../staging/orderDetail?orderId='+orderId
					})
				}
			},
			// 支付追加金额
			payOther(line){
				this.needPay = line.append_amount;
				this.orderId = line.orderId;
				this.$refs.popup.open();
			},
			// 确认上门
			getDoor(orderId){
				uni.showModal({
					content:'确定接单师傅已上门？',
					success: (op) => {
						if(op.confirm){
							this.tool.getData('Order/orderChange',{
								orderId:orderId,
								type:'1'
							}).then(res=>{
								console.log(res);
								if(res){
									this.page = 1;
									this.initList();
								}
							}).catch(err=>{
								console.log(err);
							})
						}
					}
				})
			},
			// 确认完成
			sureFinish(orderId){
				uni.showModal({
					content:'确定已收到商品且没有问题？',
					success: (op) => {
						if(op.confirm){
							this.tool.getData('PointOrder/orderChange',{
								orderId:orderId,
								type:'3'
							}).then(res=>{
								console.log(res);
								if(res){
									this.page = 1;
									this.initList();
								}
							}).catch(err=>{
								console.log(err);
							})
						}
					}
				})
			},
			// 取消订单
			cancelOrder(orderId){
				uni.showModal({
					content:'确定取消该订单？',
					success: (op) => {
						if(op.confirm){
							if(this.identity == '1'){
								this.tool.getData('PointOrder/orderChange',{
									orderId:orderId,
									type:'2'
								}).then(res=>{
									console.log(res);
									if(res){
										uni.showToast({
											title:'订单已取消',
											icon:"none"
										})
										this.page = 1;
										this.initList();
									}
								}).catch(err=>{
									console.log(err);
								})
							}else{
								this.tool.getData('Store/orderChange',{
									type:1,
									orderId:orderId
								}).then(res=>{
									console.log(res);
									if(res){
										uni.showToast({
											title:'订单已取消',
											icon:"none"
										})
										this.page = 1;
										this.initList();
									}
								}).catch(err=>{
									console.log(err);
								})
							}
						}
					}
				})
			},
			// 支付订单
			payOrder(orderId){
				var itemList2 = [];
				if(this.is_show_pay == 1){
					itemList2 = ['微信支付','支付宝支付'];
				}else{
					itemList2 = ["余额"];
				}
				
				uni.showActionSheet({
					// #ifdef MP-WEIXIN
					itemList :['微信支付'],
					// #endif
					
					// #ifdef APP-PLUS
					itemList :itemList2,
					// #endif
					
					success: (op) => {
						let pay_method = 1;
						if(op.tapIndex == 0){
							// #ifdef MP-WEIXIN
							pay_method = 2;	
							// #endif
							// #ifdef APP-PLUS
							if(this.is_show_pay == 1){
								pay_method = 4;
							}else{
								pay_method = 1;
							}
							// #endif
						}else if(op.tapIndex == 1){
							pay_method = 3;
						}
						this.tool.getData('PointOrder/orderPay',{
							orderId:orderId,
							pay_method:pay_method,
						}).then(res2=>{
							if(res2){
								if(pay_method == 2 || pay_method == 4){
									uni.requestPayment({
										provider:'wxpay',
										timeStamp:res2.weixin.timeStamp,
										nonceStr:res2.weixin.nonceStr,
										package:res2.weixin.package,
										signType:res2.weixin.signType,
										paySign:res2.weixin.paySign,
										success: () => {
											uni.showToast({
												title:'订单支付成功',
												icon:"success"
											})
											this.page = 1;
											this.initList();
										},
										fail:(err)=>{
											console.log(err);
											uni.showToast({
												title:'订单支付失败',
												icon:"none"
											})
										}
									})
								}else if(pay_method == 1){
									uni.showToast({
										title:'订单支付成功',
										icon:"success"
									})
									this.page = 1;
									this.initList();
								}else if(pay_method == 3){
									uni.requestPayment({
										provider:'alipay',
										orderInfo:res2.alipay,
										success: () => {
											uni.showToast({
												title:'订单支付成功',
												icon:"success"
											})
											this.page = 1;
											this.initList();
										},
										fail:(err)=>{
											console.log(err);
											uni.showToast({
												title:'订单支付失败',
												icon:"none"
											})
										}
									})
								}
							}
						}).catch(err=>{
							console.log(err);
						})
					},
					fail:(err)=>{
						
					},
				})
			},
			// 修改菜单
			changeMenu(status){
				this.status = status;
				this.page = 1;
				this.list = [];
				this.initList();
			}
		}
	}
</script>

<style lang="scss">
	.orders{
		width: 100%;
		padding: 0 4%;
		box-sizing: border-box;
		.uni-popup__wrapper-box{
			width: 84%;
			margin: 0 auto;
			.toast{
				width: 100%;
				background: white;
				border-radius:6px;
				overflow: hidden;
				.btns{
					width: 100%;
					.btn{
						padding: 10px 0;
						flex: 1;
						text-align: center;
					}
					.sure{
						background:#1664FF;
						color: white;
					}
				}
				.content{
					width: 100%;
					padding:12px;
					box-sizing: border-box;
					.ipt{
						margin:10px 0; 
						background:#eeeeee;
						border-radius: 4px; 
						padding:10px;
						box-sizing: border-box; 
						width:100%;
					} 
					.amount{
						text-align: center;
						text{
							font-size: 26px;
							font-weight: bold;
							color:#FF3B2F;
						}
					}
				}
				.title{
					width: 100%;
					text-align: center;
					padding: 12px 0;
					font-weight: bold;
				}
			}
		}
		.list{
			width: 100%;
			margin-top: 12px;
			.line{
				width: 100%;
				border-radius: 2px;
				margin-bottom: 10px;
				background: white;
				padding:0 12px;
				box-sizing: border-box;
				.result{
					width: 100%;
					padding: 10px 0;
					border-top: 1px solid #EEEEEE;
					.btns{
						flex: 1;
						.btn{
							width: max-content;
							padding: 6px 10px;
							font-size: 12px;
							border-radius: 50px;
							margin-left: 10px;
							color: #333333;
							border: 1px solid transparent;
						}
						.status1{
							border-color:#999999;
						}
						.status2{
							background: none;
							border-color: #FF3B2F;
							color:#FF3B2F;
							// background: linear-gradient(-45deg,#1d69ff 0%, #609ff8 100%);
							// color: white;
						}
						.status3{
							color: #1664FF;
							border-color: #1664FF;
						}
						.status4{
							background:#FF3B2F;
							color:white;
						}
					}
					.allPrice{
						font-size: 12px;
						text{
							color:#FF3B2F;
							font-size: 14px;
						}
					}
				}
				.shops{
					width: 100%;
					.shopOne{
						width: 100%;
						padding: 8px 0;
						.shopInfo{
							flex: 1;
							.price{
								color:#FF3B2F;
								font-size:12px;
								text{
									font-size: 14px;
								}
							}
							.shopName{
								font-size: 15px;
							}
							.way,.guige{
								color: #999999;
								line-height: 22px;
								font-size: 12px;
							}
						}
						.shopImg{
							width: 82px;
							height: 82px;
							margin-right: 12px;
							image{
								height: 100%;
							}
						}
					}
				}
				.orderNo{
					width: 100%;
					padding: 10px 0;
					border-bottom: 1px solid #EEEEEE;
				}
			}
			.line:last-child{
				margin: 0;
			}
		}
		.menus{
			width: 100%;
			padding: 16px 0 0;
			.menuOne{
				flex: 1;
				text-align: center;
				font-weight: bold;
				.line{
					width: 21px;
					height: 2px;
					border-radius: 50px;
					margin: 7px auto 0;
					background: none;
				}
			}
			.active{
				color: #1664FF;
				.line{
					background: #1664FF;
				}
			}
		}
	}
</style>
